<template>
  <!--用户页面查询条件-->
  <a-form class="ant-advanced-search-form" :form="form" @submit="conditionSearch">
    <a-row :gutter="24">
      <a-col :span="8" :style="{ display: 1 < count ? 'block' : 'none' }">
        <a-form-item
          label="用户名"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-input
            v-decorator="[`username`]"
            placeholder="请输入查询的用户名"
            :allowClear="true"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8" :style="{ display: 2 < count ? 'block' : 'none' }">
        <a-form-item
          label="昵称"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-input
            v-decorator="[`nickname`]"
            placeholder="请输入查询的昵称"
            :allowClear="true"
          />
        </a-form-item>
      </a-col>
      <a-col
        :span="8"
        :style="{ display: 3 < count ? 'block' : 'none' }">
        <a-form-item
          label="状态"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-select
            v-decorator="[`state`]"
            placeholder="请选择状态"
            :allowClear="true"
          >
            <a-select-option value="1">启用</a-select-option>
            <a-select-option value="0">禁用</a-select-option>
            <a-select-option value="2">锁定</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8" :style="{ display: 4 < count ? 'block' : 'none' }">
        <a-form-item
          label="部门"
          :label-col="labelCol"
          :wrapper-col="wrapperCol">
          <a-tree-select
            v-decorator="[`departmentCode`]"
            placeholder="请选择所属部门"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :treeData="treeFmt"
            :allowClear="true"
          >
          </a-tree-select>
        </a-form-item>
      </a-col>
      <a-col :span="8" :style="{ display: 5 < count ? 'block' : 'none' }">
        <a-form-item
          label="用户角色"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-select
            v-decorator="['roleId']"
            placeholder="请选择角色"
            :allowClear="true"
          >
            <a-select-option v-for="d in roleSelect" :key="d.id">
              {{ d.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <!--查询按钮组-->
      <a-col :span="8" :style="{ float: 'right', textAlign: 'right' }">
        <a-button type="primary" html-type="submit">
          查询
        </a-button>
        <a-button :style="{ marginLeft: '8px' }" @click="conditionClear">
          清除
        </a-button>
        <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="conditionToggle">
          更多查询 <a-icon :type="expand ? 'up' : 'down'" />
        </a>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import { treeConvert } from '@/utils/antUtil'
import api from '../system.js'

// 用户页面查询条件
export default {
  name: 'UserQuery',
  data () {
    return {
      labelCol: {
        xs: { span: 12 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 18 }
      },
      expand: false,
      form: this.$form.createForm(this),
      roleSelect: [],
      treeData: []
    }
  },
  computed: {
    count () {
      return this.expand ? 100 : 3
    },
    treeFmt () {
      let { treeData } = this
      treeData = treeData || []
      const tree = treeConvert(treeData)
      return tree
    }
  },
  created () {
    this.queryDepartmentTree()
    this.queryRoleList()
  },
  methods: {
    // 查询按钮 使用$emit触发父组件的自定义事件search
    conditionSearch (e) {
      e.preventDefault()
      this.$emit('search')
    },
    // 清除条件按钮
    conditionClear () {
      this.form.resetFields()
    },
    // 更多查询切换按钮
    conditionToggle () {
      this.expand = !this.expand
    },
    // 获取form查询内容数据 主要提供给父级调用
    getFormValue () {
      return this.form.getFieldsValue()
    },
    // 获取组织结构树
    queryDepartmentTree () {
      this.axios.post(api.department.getDepartmentTree)
        .then((res) => {
          this.treeData = res.data
        })
        .catch((error) => {
          console.log('请求异常...', error)
        })
    },
    // 获取角色list
    queryRoleList () {
      this.axios.post(api.role.getList)
        .then((response) => {
          this.roleSelect = response.data
        })
        .catch((error) => {
          console.log('【角色下来】获取数据请求异常了', error)
        })
    }
  }
}
</script>
